// src/components/LoadingOverlay/LoadingOverlay.jsx
import React, { useEffect, useState } from 'react';
import './index.css';

const LoadingOverlay = ({ 
  isLoading = true, 
  color = '#3498db',
  bgColor = 'rgba(0, 0, 0, 0.7)',
  size = 80,
  text = '加载中...',
  textColor = '#fff',
  zIndex = 1000
}) => {
  const [visible, setVisible] = useState(false);
  
  useEffect(() => {
    if (isLoading) {
      setVisible(true);
    } else {
      // 添加退出动画
      const timer = setTimeout(() => setVisible(false), 300);
      return () => clearTimeout(timer);
    }
  }, [isLoading]);

  if (!visible) return null;

  return (
    <div 
      className="loading-overlay" 
      style={{ 
        backgroundColor: bgColor,
        zIndex: zIndex
      }}
    >
      <div className="loading-container">
        <div 
          className="spinner" 
          style={{
            width: size,
            height: size,
            borderColor: color,
            borderTopColor: 'transparent',
          }}
        />
        {text && (
          <p className="loading-text" style={{ color: textColor }}>
            {text}
          </p>
        )}
      </div>
    </div>
  );
};

export default LoadingOverlay;